<template>
	<view class="page">
		<cu-custom  bgColor="bg-white" :isBack="true">
		    <block slot="content">组局详情</block>
		</cu-custom>
		<view class="hot flex">
			<image class="hot_logo" src="../../static/images/detail/hot_game.png" mode="aspectFit"></image>
			<view>{{group_detail.max_people||0}}人组</view>
		</view>
		<view class="content">
			<view class="head flex">
				<image v-if="group_detail.members.length > 0" :src="group_detail.members[0].avatar" mode="aspectFill" class="head_img"></image>
				<view>
					<view v-if="group_detail.members.length > 0">{{group_detail.members[0].nickname}}</view>
					<view class="text-grey">“  我发现了一个好玩的，一起来组局吧   ”</view>
				</view>
			</view>
			<view class="padding-lr-sm detail flex justify-between">
				<view style="position: relative;">
					<image class="item_img" src="https://img.js.design/assets/img/66e7ec77cf90ad6de232e50d.png#8897541e728f48a3c20441ad78e3915b"></image>
					<view class="group_status" v-if="group_detail.status == 1">组局中</view>
					<view class="group_status" v-if="group_detail.status == 2">组局成功</view>
					<view class="group_status" v-if="group_detail.status == 3">组局失败</view>
				</view>
				<view>
					<view class="flex justify-between align-center">
						 <view class="flex">
							 <view class="group_num">{{group_detail.max_people||0}}人团</view>
							 <view class="group_title">{{group_detail.cassette.name}}</view>
						 </view>
						 
						 <view class="distance"> <i class="cuIcon-locationfill text-orange-light" style="font-size: 30rpx;"></i> 24Km</view>
					</view>
					<view class="address">{{group_detail.merchant.address_detail}}</view>
					<view class="address">开局时间：{{group_detail.start_time}}</view>
					<view class="flex align-center justify-around" style="margin-top: 16rpx;">
						<view class="progress_icon">
							<image class="progress_icon_img" src="../../static/images/detail/hot_game.png" mode="aspectFit"></image>
						</view>
						<view class="cu-progress progress-bar round bg-orange-light2" style="">
						    <view class="bg-orange-dark" :style="[{ width:progree_percent+'%'}]"></view>
						</view>
						<view class="text-grey">{{group_detail.join_people}}/{{group_detail.max_people}}人</view>
					</view>
					<view class="flex room_price align-center">
						<view>包间消费均价</view>
						<view class="text-price">{{group_detail.merchant.aver_price}}</view>
					</view>
					<view class="flex flex-wrap margin-tb-sm">
						<view class="tips_item">
							{{group_detail.play_mode}}
						</view>
						<view class="tips_item">
							{{group_detail.requirements}}
						</view>
					</view>
				</view>
			</view>
			
		  <view class="detail_container">
			<view class="line"></view>
			<text class="text">第{{group_detail.id}}期</text>
			<view class="line"></view>
			<view class="red_circle_left"></view>
			<view class="red_circle_right"></view>
		  </view>
		  
		  <view class="join_detail">
			   <view class="flex align-center text-center justify-center" v-if="group_detail.is_join">
				   <image src="../../static/images/detail/success.png" mode="aspectFit" class="success_icon"></image>
				   <view class="success_text"  v-if="group_detail.status==2">组局成功</view>
				   <view class="success_text"  v-if="group_detail.status==3">组局失败</view>
				   <view class="success_text"  v-if="group_detail.status==1">入局成功</view>
			   </view>
			   <view class="success_tips text-center padding-tb-sm">还差 <text class="text-orange-light">{{group_detail.max_people - group_detail.join_people  }}</text> 人组局开房成功，请留意微信通知</view>
		  </view>
		  
		  <view class="join_people flex justify-center align-end">
			  <view class="text-center margin-right-sm" v-for="(item,index) in group_detail.members" :key="index">
				  <view class="leader" v-if="item.is_leader == 1">队长</view>
				  <image class="team_player_img" :src="item.avatar" mode="aspectFill"></image>
			  </view>
			  
			  <view  class="text-center margin-right-sm" v-for="item in left_member" :key="item" >
					<view class=" cuIcon-question text-gray" style="font-size: 80rpx;"></view>
			  </view>
		  </view>
		  
		  <!-- 商家信息 -->
		  <view class="shop_info flex align-center justify-between">
		  	<view class="flex align-center">
		  		<image class="shop_thumb" src="https://img.js.design/assets/img/62f0aef474d3ef5536d73437.png" mode="aspectFit"></image>
		  		<view>
		  			<view class="shop_name">{{group_detail.merchant.name}}</view>
					<view class="shop_address">电话 | {{group_detail.merchant.mobile}}</view>
		  			<view class="shop_address">地址 | {{group_detail.merchant.address_detail}}</view>
		  		</view>
		  	</view>
		  	<view>
		  		<view class="flex align-center">
		  			<view :class="group_detail.merchant.is_open ? 'shop_open' : 'shop_close'">{{group_detail.merchant.is_open ? '营业' : '休息中'}}</view>
		  			<!-- <view class="shop_time">24h</view> -->
		  		</view>
		  		<view class="shop_distance"><i class="cuIcon-locationfill icon_distance"></i>  3.5Km </view>
		  	</view>
		  </view>
		  
		  <block v-if="group_detail.is_join">
			  <view class="flex align-center justify-around padding-lr-sm margin-bottom-sm" v-if="group_detail.status == 1">
			  	 <button class="cu-btn bg-orange-light round lg cuIcon-add" style="width: 50%;margin-right: 40rpx;">邀请好友参加</button>
			  	 <button class="cu-btn bg-orange-dark round lg cuIcon-forwardfill" style="width: 50%;">后台推送</button>
			  </view>
			  <view class="join_chat"> <i class="cuIcon-weixin margin-right-sm" v-if="group_detail.status == 1"></i> 进入局聊</view>
			  <view class="flex align-center justify-around padding-lr-sm" v-if="group_detail.status == 2">
			  	 <button class="cu-btn bg-orange-light round lg cuIcon-add cuIcon-weixin" style="width: 50%;margin-right: 40rpx;">进入局聊</button>
			  	 <button class="cu-btn bg-orange-dark round lg  cuIcon-phone" style="width: 50%;" @click="make_phone">联系商家开房</button>
			  </view>
		  </block>
		  
		  <block v-else>
			  <button class="cu-btn bg-orange-dark round lg flex justify-center margin-lr-lg" @click="join_group">立即加入</button>
		  </block>
		  
		  
		  
		</view>
		
		<!-- 聊天 -->
		<view class="chat_content">
			<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft" class="bg-white nav text-center">
				<view class="flex text-center justify-around padding-lr-sm">
					<view class="cu-item" :class="TabCur==0?'text-orange cur':'text-gray'"  @tap="tabSelect" :data-id="0">
						聊天信息
					</view>
					<view class="cu-item" :class="TabCur==1?'text-orange cur':'text-gray'"  @tap="tabSelect" :data-id="1">
						群成员
					</view>
				</view>
			</scroll-view>
			<view class="cu-chat">
			    <!-- 图片 -->
				<view class="cu-item self">
					<view class="main">
						<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius " mode="widthFix"></image>
					</view>
					<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
					<view class="date"> 13:23</view>
				</view>
			    <!-- 语音 -->
				<view class="cu-item self">
					<view class="main">
						<view class="action text-bold text-grey">
							3"
						</view>
						<view class="content shadow">
							<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
						</view>
					</view>
					<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
					<view class="date">13:23</view>
				</view>
			    <!-- 消息带图标 -->
				<view class="cu-item self">
					<view class="main">
						<view class="action">
							<text class="cuIcon-locationfill text-orange text-xxl"></text>
						</view>
						<view class="content shadow">
							喵星球，喵喵市
						</view>
					</view>
					<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
					<view class="date">13:23</view>
				</view>
			    <!-- 翻译错误 -->
				<view class="cu-item">
					<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
					<view class="main">
						<view class="content shadow">
							@#$^&**
						</view>
						<view class="action text-grey">
							<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
						</view>
					</view>
					<view class="date">13:23</view>
				</view>
			</view>
			
			<view class="cu-bar  input">
				<view class="action">
					<text class="cuIcon-add text-grey"></text>
				</view>
				<input class="chat_input round padding-left-sm"  :adjust-position="false"  placeholder="输入" :focus="false" maxlength="300" cursor-spacing="10"></input>
				<button class="cu-btn bg-orange-dark shadow">发送</button>
			</view>


		</view>
		<!-- 广告 -->
		<view class="ad">
			<image src="https://img.js.design/assets/img/61d52e5d9adcdcb097715199.png" mode="aspectFill" class="ad_img"></image>
			<div  style="" class="flex align-center ad_icon">
				<view>广告</view>
				<i class="cuIcon-unfold"></i>
			</div>
		</view>
		
		<view class="rule_container">
			<view class="rule_container_line"></view>
			<text class="rule_container_text">开 · 房 · 流 · 程</text>
			<view class="rule_container_line"></view>
		</view>
		
		<view class="rule_info">
			 <view class="rule_title">参与组局流程</view>
			 <view class="flex justify-between">
				 <view class="text-center">
					 <image class="step_img" src="../../static/images/detail/step1.png" mode="aspectFill"></image>
					 <view class="step_name">1.选择好玩项目</view>
				 </view>
				 <view class="step_line"></view>
				 <view class="text-center">
					 <image class="step_img" src="../../static/images/detail/step2.png" mode="aspectFill"></image>
					 <view class="step_name">2.点击免费组局</view>
				 </view>
				 <view class="step_line"></view>
				 <view class="text-center">
						 <image class="step_img" src="../../static/images/detail/step3.png" mode="aspectFill"></image>
						 <view class="step_name">3.邀请附近入局</view>
				 </view>
				 <view class="step_line"></view>
				 <view class="text-center">
						 <image class="step_img" src="../../static/images/detail/step4.png" mode="aspectFill"></image>
						 <view class="step_name">4.成功联系商家</view>
				 </view>
			 </view>
			 
			  <view class="rule_title padding-tb-sm">组局开房流程</view>
			  <div class="flex justify-around align-center">
			    <div class="node main-node"> 满4人成局</div>
				<view class="process_line"></view>
				<image src="../../static/images/detail/line.png" mode="aspectFill" style="width: 24rpx;height: 140rpx;"></image>
			    <div class="branches">
			      <div class="branch branch-a flex" style="margin-bottom: 70rpx;">
			        <div class="node margin-right-sm">4人组局成功</div>
			        <div class="node">联系商家开房成功</div>
			      </div>
			      <div class="branch branch-b flex">
			        <div class="node margin-right-sm">未满4人未成</div>
			        <div class="node">自动解散无需费用</div>
			      </div>
			    </div>
			  </div>
			  
			   <view class="rule_title padding-tb-sm">组局说明</view>
			   <view class="rule_main">
				   本平台只负责组局成功，至于开局后付费请联系商家本平台禁止黄赌毒，请大家文明约局
			   </view>
		</view>
		
		<view style="height: 10rpx;"></view>
	</view>
</template>

<script>
	import { getMechantDetail,groupDetail,joinGroup} from '@/api/merchant.js';
	import tools from '../../utils/tools.js'
	import validate from '../../utils/validate';
	export default {
		
		data() {
			return {
				progree_percent : 60,
				TabCur: 0,
				scrollLeft: 0,
				index : 0,
				left_member : 0,
				group_detail : {
					merchant : {},
					members : [],
					cassette : {}
				} ,//组局详情

			}
		},
		onLoad(option) {
			let id = option.order_id
			if(!id){
				// uni.navigateBack();
			}
			this.fetch_group_detail(id);
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			//订单详情
			fetch_group_detail(order_id){
				groupDetail(order_id).then(res=>{
					this.group_detail  = res.data
					this.progree_percent = (res.data.join_people / res.data.max_people).toFixed(2)
					this.left_member   = res.data.max_people - res.data.join_people
				})
			},
			make_phone(){
				if(this.group_detail.merchant.mobile){
					uni.makePhoneCall({
						phoneNumber:this.group_detail.merchant.mobile
					})
				}
			},
			join_group(){
				var that = this
				//加入组局
				uni.showModal({
					title: "确认操作",
					content: "确定加入么？",
					success:  (res) => {
					  if (res.confirm) {
							joinGroup(that.group_detail.id).then(res=>{
								tools.Tips('加入成功')
								that.fetch_group_detail(that.group_detail.id);
							})
					  }
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background: rgba(254, 94, 41, 1);
		height: 100%;
	}
	.hot {
		border-top-right-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		background: rgba(254, 210, 165, 1);
		padding: 10rpx 15rpx;
		color: rgba(233, 8, 12, 1);
		width: 160rpx;
		margin-top: 42rpx;
		margin-bottom: 42rpx;
	}
	.hot_logo{
		width: 32rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	.content{
		background: #fff;
		margin-left: 24rpx;
		margin-right: 24rpx;
		border-radius: 24rpx;
		padding-top: 24rpx;
		padding-bottom: 44rpx;
	}
	.head{
		padding-top: 26rpx;
		padding-left: 25rpx;
		margin-bottom: 40rpx;
	}
	.head_img{
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	.detail{
		background: rgba(244, 248, 251, 1);
		border-radius: 10rpx;
		padding: 20rpx 15rpx;
		margin: 0 12rpx;
	}
	.item_img{
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
		
	}
	.group_status{
		position: absolute;
		background: rgba(254, 94, 41, 1);
		color: #fff;
		font-size: 28rpx;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.group_num{
		border: 1rpx solid rgba(228, 59, 62, 1);
		color: rgba(228, 59, 62, 1);
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}
	.group_title{
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		margin-right: 10rpx;
	}
	.distance{
		font-size: 20rpx;
		color: rgba(102, 102, 102, 1);;
	}
	.address{
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
		margin-top: 12rpx;
	}
	.progress_icon{
		background: #fff;
		border-radius: 50%;
		padding: 10rpx 15rpx;
		z-index: 2;
	}
	.progress_icon_img{
		width: 24rpx;
		height: 24rpx;
	}
	.cu-progress{
		height: 28rpx;
	}
	.progress-bar{
		width: 230rpx;
		margin-left: -50rpx;
		z-index: 1;
	}
	.room_price{
		color: rgba(210, 72, 69, 1);
		font-size: 24rpx;
		
	}
	.text-price{
		font-size: 32rpx;
		margin-left: 20rpx;
	}
	.tips_item{
		border-radius: 4rpx;
		background: rgba(244,239, 242);
		font-size: 20rpx;
		color: rgba(255, 13, 13, 1);
		padding: 10rpx 15rpx;
		border: 5rpx;
		margin-right: 16rpx;
		margin-bottom: 5rpx;
	}
	.detail_container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  color: rgba(254, 94, 41, 1);
	  font-size: 32rpx;
	  padding:18rpx;
	  position: relative;
	}
	
	.line {
	  flex: 1;
	  height: 1px;
	  border-bottom: 1px dashed rgba(254, 94, 41, 1);
	}
	
	.text {
	  margin: 0 10px;
	  white-space: nowrap;
	}
	.red_circle_left{
		position: absolute;
		background: rgba(233, 8, 12, 1);
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		left: -20rpx;
	}
	.red_circle_right{
		position: absolute;
		background: rgba(233, 8, 12, 1);
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		right: -20rpx;
	}
	.join_detail{
		padding: 22rpx 44rpx;
	}
	.success_icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	.success_text{
		font-size: 30rpx;
		color: rgba(48, 167, 93, 1);
	}
	.success_tips{
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
	}
	.leader{
		border-radius: 20rpx;
		background: rgba(210, 72, 69, 1);
		padding: 5rpx 10rpx;
		color: #fff;
		font-size: 20rpx;
	}
	.team_player_img{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-top: 5rpx;
		
	}
	.join_people{
		padding: 30rpx 0;
		padding-top:0rpx;
	}
	.join_chat{
		background: #fff;
		border: 2rpx solid rgba(254, 94, 41, 1);
		color: rgba(254, 94, 41, 1);
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 10rpx 22rpx;
		font-size: 36rpx;
	}
	.shop_info {
		padding-top: 10rpx;
		padding-bottom: 36rpx;
		padding-left: 32rpx;
		padding-right: 22rpx;
		background-color: #fff;
	}
	.shop_info .shop_thumb{
		width: 80rpx;
		height: 71rpx;
		margin-right: 16rpx;
	}
	.shop_info .shop_name{
		font-size: 28rpx;
		color:  rgba(51, 51, 51, 1);
		font-weight: bold;
		margin-bottom: 5rpx;
	}
	.shop_info .shop_address{
		color: rgba(102, 102, 102, 1);
		font-size: 22rpx;
	}
	.shop_info .shop_open{
		background: rgba(228, 59, 62, 1);color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1);border: none;
	}
	.shop-list .shop_close{
		background: #ccc;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: none
	}
	.shop_info .shop_time{
		background-color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;border: 1rpx solid rgba(228, 59, 62, 1);color: rgba(228, 59, 62, 1);
	}
	.shop_info  .shop_distance{
		color: rgba(102, 102, 102, 1);
		font-size: 20rpx;
		margin-top: 10rpx;
	}
	.shop_info .icon_distance{
		color: rgba(228, 59, 62, 1);
		}
	.ad {
		padding: 0 22rpx;
		margin-top: 54rpx;
		margin-bottom: 24rpx;
		width: 100%;
		position: relative;
	}
	.ad_img {
		width: 100%;
		border-radius: 28rpx;
		height: 300rpx;
	}
	.ad_icon{
		font-size: 32rpx;
		color: #fff;
		position: absolute;
		right: 40rpx;
		top: 10rpx;
	}
	.rule_container {
	  color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  font-size: 32rpx;
	  padding:18rpx;
	  position: relative;
	  padding-bottom: 0;
	}
	
	.rule_container .rule_container_line {

	  height: 1px;
	  width: 44rpx;
	  background: #fff;
	}
	
	.rule_container .rule_container_text {
	  margin: 0 10px;
	  white-space: nowrap;
	}
	
	.rule_info{
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx 20rpx;
		margin: 40rpx 24rpx;
	}
	.rule_title{
		font-size: 36rpx;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 32rpx;
	}
	.step_img{
		width: 95rpx;
		height: 95rpx;
	}
	.step_name{
		font-size: 20rpx;
		color: rgba(51, 51, 51, 1);;
	}
	.step_line{
		height: 2rpx;
		width: 80rpx;
		background-color: rgba(255, 228, 219, 1);
		margin-top: 50rpx;
	}
	  .mind-map {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	.node{
		border: 1px solid rgba(255, 220, 209, 1);
		border-radius: 10rpx;
		background: rgba(255, 245, 242, 1);
		color: rgba(255, 124, 80, 1);
		font-size: 22rpx;
		padding: 10rpx 20rpx;
	}

	.process_line {
	  flex: 1;
	  height: 1px;
	  border-bottom: 1px solid rgba(255, 220, 209, 1)
	}
	.rule_main{
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		line-height: 1.6;
	}
	.chat_content{
		border-radius: 20rpx;
		background: #fff;
		margin: 24rpx;
		padding: 16rpx;
	}
	.chat_content .content{
		background: rgba(242, 243, 245, 1) !important;
	}
	.chat_content .chat_input{
		background: rgba(249, 249, 249, 1);
	}
</style>
